<!DOCTYPE html>
html
  head
    meta(http-equiv="Content-Type", content="text/html; charset=utf-8")
    meta(http-equiv="Content-Language", content="zh-cn")
    meta(name="apple-mobile-web-app-capable", content="no")
    meta(name="apple-touch-fullscreen", content="yes")
    meta(name="format-detection", content="telephone=no,email=no")
    meta(name="apple-mobile-web-app-status-bar-style", content="white")
    meta(http-equiv="X-UA-Compatible", content="IE=Edge,chrome=1")
    meta(http-equiv="Expires", content="0")
    meta(http-equiv="Pragma", content="no-cache")
    meta(http-equiv="Cache-control", content="no-cache")
    meta(http-equiv="Cache", content="no-cache")
    meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0")
    title Steedos OAuth2 Consent
    block css
      link(rel="stylesheet", href="/assets/styles/steedos-tailwind.min.css")
    style.
      .DashedConnection{
        margin-bottom: 0 !important;
        margin-right: auto !important;
        margin-left: auto !important;
        display: block !important;
        position: relative;
        //- width: 300px;
      }
      .DashedConnection::before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        content: "";
        border-bottom: 2px dashed #d0d7de;
      }
      .CircleBadge{
            display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          box-shadow: var(--color-shadow-medium);
          width: 96px;
          height: 96px;
          position: relative;
          background-color: #ffffff;
      }
      .position-relative {
          position: relative !important;
      }
      .color-bg-success-emphasis {
          background-color:  #2da44e !important;
      }
      .text-center {
          text-align: center !important;
      }
      .flex-items-center {
          align-items: center !important;
      }
      .flex-justify-between {
          justify-content: space-between !important;
      }
      .color-fg-on-emphasis{
            color: #ffffff !important;
      }
      .octicon {
          display: inline-block;
          overflow: visible !important;
          vertical-align: text-bottom;
          fill: currentColor;
      }
      .title{
        margin-top: 0;
        margin-bottom: 24px !important;
        font-size: 24px !important;
        line-height: 1.25 !important;
        text-align: center !important;
        font-weight: 400 !important;
      }
      body{
            max-width: 530px;
            margin-right: auto !important;
            margin-left: auto !important;
      }
      .text-small {
          font-size: 12px !important;
      }
  body(class="antialiased font-sans bg-gray-200 overflow-hidden")
    .px-3.pt-4
      .DashedConnection.mb-0.mx-auto.d-none.d-md-block(class='w-64 md:w-96')
        .mt-5.flex.flex-justify-between.flex-items-center(class='sm:grid-cols-3')
          .CircleBadge.CircleBadge--medium(style='background-color:#ffffff')
            img.CircleBadge-icon(src=client.logo_uri height='50' width='50' alt='')
          .position-relative.color-bg-success-emphasis.text-center(style='border-radius: 50%; width:32px; height:32px;')
            svg.octicon.octicon-check.color-fg-on-emphasis.mt-2(aria-hidden='true' height='16' viewbox='0 0 16 16' version='1.1' width='16' data-view-component='true')
              path(fill-rule='evenodd' d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z')
          .CircleBadge.CircleBadge--medium.box-shadow-none(style='background-color: #fff; overflow: hidden;')
            img.CircleBadge-icon(src='/favicon.ico' height='50' width='50' alt='')
      h2.title 授权 #{client.client_name || client.client_id}

    .max-w-7xl.mx-auto.py-2.px-4(class='md:px-0')
      .max-w-2xl.mx-auto
        .bg-white.overflow-hidden.shadow.rounded-lg
          .px-4.py-5(class='sm:p-6')
            ul.mt-4(role='list')
              li.py-4.flex.items-center.justify-between.space-x-3
                .min-w-0.flex-1.flex.items-center.space-x-3
                  .flex-shrink-0
                    img.h-10.w-10.rounded-full(src='http://192.168.3.2:6800/packages/steedos_lightning-design-system/client/images/themes/oneSalesforce/lightning_lite_profile_avatar_96.png' alt='')
                  .min-w-0.flex-1
                    p.text-sm.font-medium.text-gray-900.truncate <strong>#{client.client_name || client.client_id}</strong>想访问您的<strong>#{userInfo.name}</strong>账户
                    p.text-sm.font-medium.text-gray-500.truncate 此应用程序将能够读取您的个人基本信息
          .border-t.border-gray-200.px-4.py-4(class='sm:px-6')
            form(action=action, method="POST")
              input(type="hidden", name="challenge", value=challenge)
              input(type="hidden", name="_csrf", value=csrfToken)
              div(class='flex items-center justify-between')
                
                each scope in requested_scope
                  div(class='flex items-center')
                    input(type="checkbox", class="grant_scope h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded", id=scope, value=scope, name="grant_scope" checked="checked")
                    if scope === 'profile'
                      label(for=scope class='ml-2 block text-sm text-gray-900') 访问基本信息 (id, email, address, phone, locale)
                    else if scope === 'profile'
                      label(for=scope class='ml-2 block text-sm text-gray-900') 完全访问权限
                    else if scope === 'openid'
                      label(for=scope class='ml-2 block text-sm text-gray-900') 允许访问您的唯一标志符
                    br
              .mt-5(class='sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense')
                button.w-full.inline-flex.justify-center.rounded-md.border.border-transparent.shadow-sm.px-4.py-2.bg-indigo-600.text-base.font-medium.text-white(type='submit' id="accept" name="submit" value="Allow access" class='hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm')
                  | 授权 #{client.client_name || client.client_id}
                button.mt-3.w-full.inline-flex.justify-center.rounded-md.border.border-gray-300.shadow-sm.px-4.py-2.bg-white.text-base.font-medium.text-gray-700(type='submit' id="reject" name="submit" value="Deny access" class='hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm')
                  | 取消
              if client.client_uri
                .col-sm-12.mt-2
                  p.text-small.color-fg-muted.mb-0.text-center
                    font(style='vertical-align: inherit;')
                      font(style='vertical-align: inherit;') &#x6388;&#x6743;&#x5C06;&#x91CD;&#x5B9A;&#x5411;&#x5230;
                    br
                    strong.color-fg-default
                      font(style='vertical-align: inherit;')
                        font(style='vertical-align: inherit;font-weight: 400;color:#24292f') #{client.client_uri}